<template>
  <div>
    <div class="form-input-area">
      <div class="top-notice">
        <Alert banner closable  type="warning">温馨提示：若您的域名已添加解析记录，请勿随意修改解析DNS，否则将导致原解析记录不生效，请谨慎操作！</Alert>
      </div>
      <Spin :withIcon="true" v-if="formLoading"></Spin>
      <div class="submit-button-style-first f-14 c-o f-w-600 checkdomain" style=" cursor: pointer;display: inline-block;padding: 5px 0;border-radius: 8px;" @click="showSelectDomain">
        从我的域名列表选择域名
      </div>
      <div class="flx-row-s-s div-line" style="margin-top: 20px">
        <div class="long-name">您要设置的域名</div>
        <div style="width: 600px; position: relative">
          <Input
              v-model="domainName"
              wrap="hard"
              type="textarea"
              :autosize="{ minRows: 10, maxRows: 10 }"
              :placeholder="'每行1个域名，可按Enter键进行换行，最多' + maxDnNumber + '个域名'"
              @on-blur="domainBlur(true)"
          />
          <span class="c-g number-tips">{{ curDnNumber }}/{{ maxDnNumber }}</span>
        </div>
      </div>
      <div class="flx-row-s-c div-line">
        <div class="long-name">DNS类型</div>
        <RadioGroup v-model="type">
          <Radio
              v-for="(item, index) in typeList"
              :key="index"
              class="radio-mg-r-20"
              :label="item.value"
          >{{ item.name }}</Radio
          >
        </RadioGroup>
      </div>
      <div class="flx-row-s-s div-line">
        <div class="long-name">DNS记录值</div>
        <div class="flx-row-s-c dns-list-area" v-if="type === 0">
          <div
              v-for="(item, index) in dnsList0"
              :key="'i' + index"
              class="flx-row-s-c"
              style="margin-bottom: 10px; height: 32px"
          >
            <div class="f-14 c-g">DNS{{ index + 1 }}：</div>
            <div class="f-d2" style="width: 200px; margin-right: 10px">
              {{ item }}
            </div>
          </div>
        </div>
        <div class="flx-row-s-c dns-list-area" v-else-if="type === 2">
          <div
              v-for="(item, index) in dnsList1"
              :key="'i' + index"
              class="flx-row-s-c"
              style="margin-bottom: 10px; height: 32px"
          >
            <div class="f-14 c-g">DNS{{ index + 1 }}：</div>
            <div class="f-d2" style="width: 200px; margin-right: 10px">
              {{ item }}
            </div>
          </div>
        </div>
        <div v-else-if="type === 1" class="flx-row-s-s">
          <div>
            <div
                class="flx-row-s-c dns-list-area"
                v-for="(item, index) in dnsInputList"
                :key="index"
            >
              <div
                  v-for="(items, index1) in item.list"
                  :key="'i' + index1"
                  class="flx-row-s-c"
                  style="margin-bottom: 10px"
              >
                <div class="f-14 c-g">
                  DNS{{ index * 2 + index1 + 1 }}：
                </div>
                <Input
                    v-model="dnsInputList[index].list[index1]"
                    placeholder="请填写"
                    :value="items"
                    style="width: 200px; margin-right: 10px"
                />
              </div>
            </div>
          </div>

          <div
              v-show="dnsInputList.length > 1"
              class="btn-add"
              @click="cutEvent"
          >
            -
          </div>
          <div
              v-show="dnsInputList.length < 6"
              class="btn-add"
              @click="addEvent"
          >
            +
          </div>
        </div>
      </div>
      <div class="btn-area">
        <div class="flx-row-s-c div-line">
          <Checkbox v-model="agree"></Checkbox>
          我已同意并阅读
          <span class="o-form-font-button" @click="ruleModelShow = true"
          >《{{ ruleTitle }}》</span
          >
        </div>
        <div
            class="user-strong-button submit-button-style div-line"
            @click="submit"
        >
          确定修改
        </div>
      </div>
    </div>
    <domain-select-modal
        :show.sync="domainSelectModalShow"
        @selectDomainConfirmEvent="selectDomainConfirmEvent"
        @cancelDomainConfirmEvent="cancelDomainConfirmEvent"
    />
    <rule-modal
        :show.sync="ruleModelShow"
        :content="ruleContent"
        :title="ruleTitle"
    />
    <domain-result-modal
        :show.sync="domainResultModalShow"
        :resultList="resultList"
        @updateCount="domainResultModalShow = false"
    />
  </div>
</template>

<script>
import DomainSelectModal from "_c/modal/domainSelectModal/domainSelectModal.vue";
import DomainResultModal from "_c/modal/domainResultModal/domainResultModal.vue";
import { parseDomain } from "@/utils/formatDomain";
import dnsRules from "@/static/dnsRules";
import {dnsSubmit} from "@/api/user";
export default {
  name: "VipBatchDnsForm",
  components: {
    DomainSelectModal,
    DomainResultModal,
    ruleModal: () => import("_c/modal/ruleModal/ruleModal.vue"),
  },
  data() {
    return {
      domainSelectModalShow: false,
      domainName: '',
      maxDnNumber: 200,
      curDnNumber: 0,
      typeList: [
        {
          name: "出售页DNS",
          value: 0,
        },
        {
          name: "解析DNS",
          value: 2,
        },
        {
          name: "第三方DNS",
          value: 1,
        },
      ],
      type: 2,
      dnsList0: ["ns01.yun-ns.cn", "ns02.yun-ns.cn"],
      dnsList1: ["dns1.190.vip", "dns2.190.vip", ],
      dnsInputList: [{ list: ["", ""] }],
      agree: false,
      ruleModelShow: false,
      ruleTitle: "",
      ruleContent: "",
      formLoading: false,
      domainResultModalShow: false,
      resultList: []
    }
  },
  created() {
    this.ruleTitle = dnsRules.title;
    this.ruleContent = dnsRules.content;
    let dnList = this.$route.params.dnList;
    if (dnList && dnList.length > 0) {
      this.domainName = dnList.join("\n");
    }
  },
  methods: {
    // 提交表单
    submit() {
      if (!this.agree) {
        return this.$Message.warning(`请同意并阅读《${this.ruleTitle}》！`);
      }
      if (this.type == null) {
        return this.$Message.warning("请选择DNS类型！");
      }
      if(this.domainName === '' || this.domainName.length === 0) {
        return this.$Message.warning("请选择输入域名！");
      }
      let dnsList = [];
      if (this.type === 1) {
        this.dnsInputList.map((item) => {
          let arr = item.list.filter((item) => item != null && item !== "");
          dnsList.push(...arr);
        });
        if (dnsList.length <= 0) {
          this.$Message.warning("请至少输入一个DNS！");
          return;
        }
      }
      this.$Modal.confirm({
        title: "确认修改",
        content: "<p>确定要修改DNS设置吗？</p>",
        onOk: async () => {
          this.formLoading = true;
          let { data, result } = await dnsSubmit({
            domainList: this.domainName.split("\n"),
            dnsPlatform: this.type,
            dnsList: dnsList,
          });
          if (result) {
            this.resultList = data
            this.domainResultModalShow = true
          }
          this.formLoading = false;
        },
      });
    },
    cutEvent() {
      this.dnsInputList.splice(this.dnsInputList.length - 1, 1);
    },
    addEvent() {
      let obj = {};
      obj.list = ["", ""];
      this.dnsInputList.push(obj);
    },
    domainBlur(isFilter) {
      if (isFilter) {
        this.domainName = parseDomain(this.domainName, false)
      }
      if (this.domainName !== '' && this.domainName.length > 0) {
        let arr = this.domainName.split("\n")
        if (arr.length > this.maxDnNumber) {
          arr = arr.splice(0, 200)
          this.domainName = arr.join("\n")
        }
        this.curDnNumber = arr.length
      }
    },
    selectDomainConfirmEvent(domain) {
      this.domainSelectModalShow = false
      this.domainName = domain
      this.domainBlur(false)
    },
    cancelDomainConfirmEvent() {
      this.domainSelectModalShow = false
    },
    showSelectDomain() {
      this.domainSelectModalShow = true
    }
  }
};
</script>

<style lang="scss" scoped>
.number-tips {
  position: absolute;
  bottom: 10px;
  right: 20px;
}
.submit-button-style-first {
  margin-left: 145px;
}
.btn-add {
  width: 32px;
  height: 32px;
  line-height: 26px;
  font-size: 20px;
  font-weight: bold;
  border: 1px solid #dcdee2;
  border-radius: 50%;
  text-align: center;
  margin-left: 20px;
  cursor: pointer;
  transition: all 0.3s;
  display: flex;
  justify-content: center;
  align-items: center;
  &:hover {
    background-color: $mainColor;
    border-color: $mainColor;
    color: #fff;
  }
}
</style>

